<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flip</title>
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
 
<div id="con"></div>
<br/>
<br/>
<br/>
<div id="con2"> </div>
<script>

fp=function(options){

	var defaults={

		unitDefaultCss:{
			margin:5,
			float:'left',
			width:100,
			height:100,
			"text-indent":-9999
		},
		unitNonclickedCss:{
			"background-color":'#eee'
		},
		unitClickedCss:{
			"background-color":'#9ee'
		},
		container:$('#con'),
		w:3,
		h:3
	};

	this.settings=$.extend(true,{}, defaults, options);
	console.log(this.settings);

	this.refresh();
	
}

fp.prototype={
	refresh:function(){
		this.maps=this.createMap(this.settings.w,this.settings.h);
		this.renderTo(this.settings.container);
		//this.checkComplete();
	},
	createMap:function(w,h){
		var maps=[];
		for(var i=0;i<w;i++){
			maps[i]=[];
			for(var j=0;j<h;j++){
				maps[i][j]=Math.round(Math.random(0,1) * 1);
				//maps[i][j]=0;
			}
		}
		return maps;
	},
	renderTo:function($dom){
		$dom.empty();
		var maps=this.maps;
		for(var i=0;i<maps.length;i++){
			for(var j=0;j<maps[i].length;j++){
				maps[i][j]=this.createUnit(j,i,maps[i][j]);
				$dom.append(maps[i][j]);
			}
		}
		var containerWidth=this.getContainerWidth();
		console.log('containerWidth = '+containerWidth);
		var handler=this.getUnitClickHandler();
		$dom.undelegate(' div.unit', 'click');
		$dom.delegate(' div.unit', 'click', handler);
		$dom.width(containerWidth);
		console.log(this.toStr());
	},
	getUnitClickHandler:function(){
		var   the = this;
		return 		function(event) {
			console.log("--click-")
			var $unit=$(event.target);
			var x = $unit.data('x');
			var y = $unit.data('y');

			console.log(x);
			console.log("x="+x);
			the.flipUnit(x,y-1);
	 		the.flipUnit(x-1,y);
 			the.flipUnit(x,y);
 			the.flipUnit(x+1,y);
	 		the.flipUnit(x,y+1);

	 		the.checkComplete();
		};
	},

	getContainerWidth(){//
		return this.settings.w * ( this.settings.unitDefaultCss.margin * 2 + this.settings.unitDefaultCss.width );
	},

 
	createUnit:function(x,y,v){
		var $o=$('<div>');
		$o.addClass('unit');
		$o.css(this.settings.unitDefaultCss);
		if(v == 1){
			$o.css(this.settings.unitClickedCss);
		}else{
			$o.css(this.settings.unitNonclickedCss);
		}
		$o.addClass('x'+x);
		$o.addClass('y'+y);
		$o.data({x:x,y:y,v:v});
		return $o;
	},
 
	flipUnit:function(x,y){
		//console.log("x="+x+",y="+y);
		if(x <0 || y < 0 || x >= this.settings.w || y >= this.settings.h) return;
 

	 
		var $uint=this.maps[y][x];
 
		if(1 == $uint.data('v') ){
			$uint.css(this.settings.unitNonclickedCss);
			$uint.data('v',0);
		}else{
			$uint.css(this.settings.unitClickedCss);
			$uint.data('v',1);
		}
		 
	},

	checkComplete:function(){
	    console.log(this.toStr());
		var maps=this.maps;
		var total = 0;
		for(var i=0;i<maps.length;i++){
			for(var j=0;j<maps[i].length;j++){
				total+=maps[i][j].data('v');
			}
		}
		if( total == 0 || total == (this.settings.w * this.settings.h)){
			//alert('You Win!');
			$('#con2').text("You Win!" );
			var the=this;
		//	$(this.settings.container).find(')
			setTimeout(function(){the.refresh();},1000);
		}else{
		    $('#con2').text('');
		}
		//$('#con2').text(total );//total == 0 ?"win":"fail" );
	},
	toStr:function(){
	    var lines=[];
	    for(var i=0;i<this.maps.length;i++){
	        var line=[];
	        for(var j=0;j<this.maps[i].length;j++){
	            line[j]=this.maps[i][j].data('v');
	         }
	          lines[i]=line.join(',');
	         
	    }
	    return lines.join('\n');
	}
	

}




new fp({w:3,h:3});

 












</script>




	
</body>
</html>